<!-- 订单信息页 -->
<template>
  <div class="container">
    <div style="position: fixed;width: 100%;top: 0;background: #fff;">
      <!-- <van-nav-bar title="订单信息" left-arrow left-text="返回"   @click-left="onClickLeft" /> -->
      <!-- left-text="返回"
      @click-left="onClickLeft" -->
      <!-- 引入公共头部组件rightText="新建" -->
      <HeaderMenu title="订单信息" leftText="返回" @rightEvent="onClickLeft" />
      <!-- 搜索区域 -->
      <van-sticky>
        <!-- 搜索区域 -->
        <van-search
          shape="round"
          background="#509DF7"
          show-action
          placeholder="请输入客户名称"
          @search="search"
          v-model="queryParam.Keyword"
          @clear="clear"
        >
          <div slot="action" @click="onSearch" style="color:#fff">搜索</div>
        </van-search>
      </van-sticky>
    </div>

    <!-- 订单列表区域 -->
    <div class="list">
      <van-list
        style="padding-bottom: 50px"
        :immediate-check="false"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="boxFormal"
          v-for="item in data"
          :key="item.Id"
          @click="deils(item)"
        >
          <div class="companyName" style="font-size:14px">
            {{ item.cCusName }}
          </div>
          <div class="code">
            <div style="padding-right: 30px">订单号:{{ item.cSOCode }}</div>
            <div>编码:{{ item.cCusCode }}</div>
          </div>
        </div>
      </van-list>
    </div>

    <Viewdetails ref="viewdetails" />
    <!-- <Formdetails ref="formdetails" /> -->
  </div>
</template>

<script>
// import Formdetails from "./Formdetails.vue";
// 引入公共头部组件
import HeaderMenu from "../../components/VolHeaderMenu.vue";
import Viewdetails from "./Viewdetails";
import { Card, Sticky, Toast } from "vant";
import { Search, Tag, NavBar, Dialog, SwipeCell, Icon, Pagination } from "vant";
// const toast = Toast.loading({
//   duration: 0, // 持续展示 toast
//   forbidClick: true,
//   message: '加载中',
// });
export default {
  components: {
    Viewdetails,
    // Formdetails,
    "van-tag": Tag,
    "van-icon": Icon,
    "van-pagination": Pagination,
    "van-swipe-cell": SwipeCell,
    "van-nav-bar": NavBar,
    "van-card": Card,
    "van-search": Search,
    "van-sticky": Sticky,
    HeaderMenu
  },
  data() {
    return {
      loading: false,
      finished: false,
      pagination: {
        current: 1,
        pageSize: 15,
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ["15", "30", "60"], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      Total: 0,
      Keyword: "",
      data: [],
      pageNo: 1,
      PageRows: 10,
      queryParam: {
        condition: "cCusName",
        Keyword: ""
      }
    };
  },
  created() {
    // 重新加载
    this.loading = true;
    // 数据没有加载完成
    this.finished = false;
    // 获取订单信息列表
    this.getDataList();
  },
  methods: {
    deils(item) {
      console.log(item);
      this.$router.push({
        path: "/transaction/Formdetails",
        query: { Id: item.ID }
      });
      // this.$refs.formdetails.openForm(item);
    },
    onLoad() {
      this.PageRows += 5;
      this.getDataList();
    },
    tableClick(Subitem) {
      this.$refs.viewdetails.openForm(Subitem);
    },
    paginationchange(a) {
      // a:当前选中页码
      this.pagination.current = a;
      this.getDataList();
    },
    btn(id) {
      Dialog.confirm({
        message: "确定要删除吗",
        confirmButtonColor: "#1989fa"
      })
        .then(() => {
          this.http
            .post(
              "/QuotationManagement/Quot_OfferSheetMain/DeleteDataOfAll",
              id
            )
            .then(resJson => {
              if (resJson.Success) {
                this.$toast("删除成功");
                this.getDataList();
              } else {
                this.$toast("删除失败");
              }
            });
        })
        .catch(() => {
          console.log(123);
        });
    },
    clear() {
      console.log(123);
      this.queryParam = {
        condition: "cCusName",
        keyword: ""
      };
      // 清空列表数据
      this.data = [];
      // 重新加载
      this.loading = true;
      // 数据没有加载完成
      this.finished = false;
      this.getDataList();
    },
    // 返回到上一页

    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$refs.edit.openForm();
    },
    //弹出页面
    Edit(Id) {
      this.$refs.edit.openForm(Id);
    },
    // 搜索按钮
    onSearch() {
      if (this.queryParam.Keyword !== "") {
        this.queryParam = {
          condition: "cCusName",
          Keyword: this.queryParam.Keyword
        };
      } else {
        this.queryParam = {
          condition: "cCusName",
          Keyword: ""
        };
      }
      // 清空列表数据
      this.data = [];
      // 重新加载
      this.loading = true;
      // 数据没有加载完成
      this.finished = false;
      // 重新获取订单信息列表数据
      this.getDataList();
    },
    //搜索
    search(value) {
      console.log(value);
      // this.queryParam.Condition = "cCusName";
      if (this.queryParam.Keyword !== "") {
        // 重新获取订单信息列表数据
        this.getDataList();
      }
      // 清空列表数据
      this.data = [];
      // 重新加载
      this.loading = true;
      // 数据没有加载完成
      this.finished = false;
    },

    // 获取订单列表数据
    getDataList() {
      this.selectedRowKeys = [];
      this.http
        .post("/OrderManagement/SO_SOMain/GetDataListByMySelfCustomer", {
          PageIndex: this.pageNo,
          PageRows: this.PageRows,
          SortField: "dDate",
          SortType: "desc",
          Search: this.queryParam
        })
        .then(resJson => {
          this.data = resJson.Data;
          this.Total = resJson.Data.Total;
          this.loading = false;
          // this.loading = true;
          // this.finished = true;
          // this.finished = false;
          if (this.data.length >= resJson.Total) {
            this.finished = true;
          } else {
            this.finished = false;
          }
        });
    }
  }
};
</script>

<style scoped>
.list {
  padding-top: 115px;
}
.search-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 200px;
  text-align: center;
}
.code {
  display: flex;
  justify-content: start;
  margin-left: 10px;
  color: #777;
}

.formalBox {
  /* height: calc(100vh - 150px); */
  /* padding-bottom: 50px; */
  box-sizing: border-box;
  overflow: auto;
}

.companyName {
  padding-top: 10px;
  margin-left: 10px;
  margin-bottom: 5px;
  color: #000000;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.8;
}

.boxFormal {
  box-shadow: 2px 2px 5px #ccc;
  border-radius: 5px;
  /* position: relative; */

  width: 95%;
  /* height: 80px; */
  padding-bottom: 10px;
  margin: 3px auto;
  margin-bottom: 10px;
}
/* table {
  border-right: 1px solid #804040;
  border-bottom: 1px solid #804040;
  border-collapse: collapse;
}

table td {
  border-left: 1px solid #804040;
  border-top: 1px solid #804040;
  padding: 3px;
}
.cCusOAddress {
  width: 300px;
  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
} */
</style>
